<template>
	<view class="impression-content">
		<image mode="widthFix" class="top-bg" src="/static/impression/top-bg.png"></image>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#fff'" :isBack="true" :custom="custom" :title="'果园印象'"></CustomNav>
		<image @click="jump" mode="widthFix" class="top-banner" src="https://guoyuan-1306862033.cos.ap-chengdu.myqcloud.com/impress_top_bg.jpg"></image>
		<view class="content-block name-block">
			<image src="/static/impression/name_title.png" mode="heightFix" class="block-title"></image>
			<view class="info-content">
				<view class="info-item">
					<view class="label">面积/km²</view>
					<view class="value">{{data.area}}</view>
				</view>
				<view class="info-item">
					<view class="label">下辖地区/行政村</view>
					<view class="value">{{data.under_region_num}}</view>
				</view>
				<view class="info-item">
					<view class="label">人口/人</view>
					<view class="value">{{data.person_num}}</view>
				</view>
			</view>
		</view>
		<view v-if="data.files.length>0" class="content-block video-block">
			<view class="video-content">
				<view v-for="(item,index) in data.files" class="video-item">
					<video @click="changeVideo" :id="'video_'+index" class="video-cover" :src="item"></video>
					<image src="/static/impression/ctrl.png" class="video-ctrl"></image>
					<view class="video-info">
						<view class="video-title">{{item.title}}</view>
						<view class="video-duration">{{item.duration}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-block text-block">
			<image src="/static/impression/introduce_title.png" mode="heightFix" class="block-title"></image>
			<view class="text-content" :class="more[1]?'':'fewer'">
				<mp-html :content="data.introduce_brief"></mp-html>
			</view>
			<view @click="more[1]=!more[1]" class="more">{{more[1]?'收起全文':'查看全文'}}</view>
		</view>
		<view class="content-block text-block">
			<image src="/static/impression/geographical_environment_title.png" mode="heightFix" class="block-title"></image>
			<view class="text-content" :class="more[2]?'':'fewer'">
				<mp-html :content="data.location_brief"></mp-html>
			</view>
			<view @click="more[2]=!more[2]" class="more">{{more[2]?'收起全文':'查看全文'}}</view>
		</view>
		<view class="content-block text-block">
			<image src="/static/impression/population_title.png" mode="heightFix" class="block-title"></image>
			<view class="text-content" :class="more[3]?'':'fewer'">
				<mp-html :content="data.person_brief"></mp-html>
			</view>
			<view @click="more[3]=!more[3]" class="more">{{more[3]?'收起全文':'查看全文'}}</view>
		</view>
		<view @click="callPhone(data.contact_phone)" class="normal btn call">联系我们</view>
	</view>
</template>

<script>
	import {getInfo} from '@/api/impression.js';
	export default{
		data(){
			return{
				custom:null,
				data:{
					
				},
				currentVideo:null,
				topBgColor:'rgba(0,0,0,0)',
				titleColor:'#fff',
				more:{
					1:false,
					2:false,
					3:false,
				}
			}
		},
		methods:{
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			getData(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getInfo().then((res)=>{
					uni.hideLoading()
					if(res.status==1){
						this.data=res.data;
					}else{
						this.utils.showToast(res.message,()=>{
							uni.navigateBack()
						});
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.utils.showToast('加载失败请重试',()=>{
						uni.navigateBack()
					});
				})
			},
			changeVideo(e){
				if(this.currentVideo){
					this.currentVideo.pause()
				}
				this.currentVideo=uni.createVideoContext(e.currentTarget.id);
				this.currentVideo.play();
			},
			jump(){
				uni.navigateTo({
					url:'/pages/beauty/index'
				})
			}
		},
		onLoad() {
			this.custom=this.utils.getCustomNavData();
			this.getData()
		},
		onPageScroll(e) {
			if(e.scrollTop>=50){
				this.topBgColor='#32CCCA';
			}else{
				this.topBgColor='rgba(0,0,0,0)';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.impression-content{
		overflow: hidden;
		width: 100%;
		padding-bottom: 100rpx;
		.top-bg{
			width: 100%;
			position: absolute;
		}
		.top-banner{
			width: calc(100% - 60rpx);
			margin: 0 auto;
			margin-top: 260rpx;
			border-radius: 16rpx;
			position: relative;
			display: block;
		}
		.content-block{
			position: relative;
			width: calc(100% - 60rpx);
			margin:30rpx auto;
			background: #fff;
			box-shadow:0 0 10px 0px #e8e8e8;
			border-radius: 16rpx;
			padding: 20rpx;
			display: flex;
			.block-title{
				height: 34rpx;
				margin-bottom: 20rpx;
			}
		}
		.content-block.name-block{
			flex-direction: column;
			.info-content{
				display: flex;
				flex-direction: row;
				.info-item{
					width: calc(100%/3);
					display: flex;
					flex-direction: column;
					align-items: center;
					border-right:1px solid #f1f0f0;
					.label{
						font-size: 24rpx;
					}
					.value{
						font-size: 38rpx;
						font-weight: bold;
						margin-top: 10rpx;
					}
				}
				.info-item:last-child{
					border-right: none;
				}
			}
		}
		.content-block.video-block{
			.video-content{
				width: 100%;
				display: flex;
				flex-direction: row;
				overflow-x: scroll;
				overflow-y: hidden;
				.video-item{
					position: relative;
					width: 540rpx;
					height: 300rpx;
					margin-right: 20rpx;
					flex: none;
					.video-cover{
						width: 100%;
						height: 100%;
					}
					.video-ctrl{
						width: 70rpx;
						height: 70rpx;
						position: absolute;
						transform: translate(-50%,-50%);
						left: 50%;
						top: 50%;
					}
					.video-info{
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						flex-direction: row;
						padding:20rpx;
						.video-title{
							flex-grow: 1;
							font-size: 26rpx;
							color: #fff;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
							margin-right: 10rpx;
						}
						.video-duration{
							flex-grow: 0;
							font-size: 26rpx;
							color: #fff;
						}
					}
				}
				.video-item:last-child{
					margin-right: 0;
				}
			}
		}
		.content-block.text-block{
			flex-direction: column;
			.text-content.fewer{
				display: flex;
				max-height: 300rpx;
				overflow: hidden;
			}
			.more{
				color: $uni-color-primary;
				font-size: 30rpx;
				text-align: right;
			}
		}
		.call{
			width: 380rpx;
			position: fixed;
			transform: translate(-50%,-50%);
			left: 50%;
			bottom: -20rpx;
		}
	}
</style>